<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
            box-sizing: border-box;
        }

        html {
            font-size: 10px;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        body {
            width: 100%;
            padding: 0;
            margin: 0 auto;
            font-size: 14px;
            color: #232628;
            font-family: tahoma, arial, "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
            -webkit-tap-highlight-color: transparent;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
           background: #F7F9FA;
        }

        .top_nav {
            min-width: 1200px;
            height: 40px;
            font-size: 12px;
            color: #71797F;
            background-color: #F3F5F7;
        }


        .top_nav_wrapper {
            width: 1200px;
            margin: 0 auto;
        }

        .top_nav_wrapper {
            display: flex;
            height: 40px;
            justify-content: space-between
        }

        .top_nav_l {
            display: flex;
            align-items: center;
        }

        .top_nav_l li {
            margin-left: 20px;
        }

        .top_nav_r {
            display: flex;
            align-items: center;
        }

        .top_nav_r li {
            margin-left: 20px;

        }

        .logo {
            float: left;
            width: 238px;
            height: 100%;
        }

        .logo .logo_nav {
            display: inline-block;
            width: 238px;
            height: 60px;
            margin-top: 30px;
            background-image: url(https://img02.hua.com/pc/pimg/home/common_sprite.png);
            background-repeat: no-repeat;
            background-position: 0 -248px;
        }

        .header_container {
            width: 1200px;
            height: 120px;
            background-color: #F7F9FA;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .search-box-group {
            position: relative;
            width: 440px;
            height: 48px;
            border-radius: 24px;
            border: 2px solid #FF734C;
            overflow: hidden;
            display: flex;
            align-items: center;
        }

        .search_img {
            width: 16px;
            height: 16px;
            background-image: url(https://img02.hua.com/pc/pimg/home/common_sprite.png);
            background-position: 0 -48px;
            margin-left: 30px;
        }

        .search_txt {
            margin-left: 30px;
            border: none;
            outline: none;
            width: 264px;
            height: 100%;
            font-size: 14px;
            background-color: inherit;
        }

        .search_btn {
            position: absolute;
            right: -2px;
            color: white;
            width: 118px;
            height: 48px;
            border-radius: 24px 24px;
            outline: none;
            font-size: 18px;
            font-weight: bold;
            background-color: #FF734C;
            border: none;
        }

        .searvice {
            font-size: 14px;
            color: #71797F;
            display: flex;

        }

        .searvice li {
            margin-left: 20px;
            height: 24px;
            /* width: 100px; */
        }

        .phon_img {
            display: inline-block;
            width: 24px;
            height: 24px;
            background-image: url(https://img02.hua.com/pc/pimg/home/common_sprite.png);
            background-position: 0 -102px;
        }

        .kefu_img {
            display: inline-block;
            width: 24px;
            height: 24px;
            background-image: url(https://img02.hua.com/pc/pimg/home/common_sprite.png);
            background-position: -34px -102px;
        }

        .goods_list {
            width: 1200px;
            margin: 0 auto;
        }

        .goods {
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            /* justify-content: ; */
           
        }

        .goods li {

            margin-left: 40px;
            margin-right: 40px;
            width: 220px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            /* box-sizing: border-box; */
     
        }
       
        .price{
            color: #ff6a00;
        }
        .goods li a img {
            width: 220px;
            height: 240px;
        }
        .goods li .addcart_btn{
            /* border: none; */
            width: 100px;
        }
        .goods li span a{
            color: #737373 ;
        }
        .goods li span a:hover{
            /* color: #737373 ; */
            text-decoration: #ff6a00;
            text-decoration-line: underline;
            color: #ff6a00;
        }
        .price_checkbox{
            width: 1200px;
            margin: 0 auto;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="top_nav">
        <div class="top_nav_wrapper">
            <ul class="top_nav_l">
                <li><a href=""> <img src="../img/xingxing.png" alt="">收藏鲜花网(hua.com) </a></li>
                <li><a href=""><img src="../img/weixin.png" alt=""> 关注微信</a></li>
                <li><a href=""><img src="../img/hua.png" alt=""> 花礼网app</a></li>
            </ul>

            <ul class="top_nav_r">
                <li id="login"><a href="./login.html">登录</a></li>
                <li id="reg"><a href="./reg.html">注册</a></li>
                <li id="logout"><a href="#">注销</a></li>
                <li><a href="">订单查询</a></li>
                <li><a href="">客户服务</a></li>
                <li><a href="shoppingcart.html"> 购物车 <img src="../img/gouwuchekong.png" alt=""></a></li>
                <li>鲜花礼品网:国内领先鲜花网品牌</li>
            </ul>
        </div>

    </div>

    <div class="header_container">
        <div class="logo">
            <a href="home_page.html" class="logo_nav"></a>
        </div>
        <div class="search-box-group">
            <span class="search_img"></span>
            <input type="text" class="search_txt" placeholder="商品搜索">
            <button class="search_btn"> 搜索</button>
        </div>
        <ul class="searvice">
            <li class="searvice_phon"><span class="phon_img"></span><span>400-889-8188</span> </li>
            <li class="searvice_kefu"><span class="kefu_img"></span> <span>在线客服</span></li>
        </ul>
    </div>
  
    <div class="price_checkbox"> 
        <select name="" id="price_select"> 
            <option value="0">价格排序</option>
             <option value="1" id="asc" >价格由低到高</option>
             <option  value="2" id="desc">价格由高到低</option>
            </select> </div>
    <div class="goods_list">
        <ul class="goods">
            <li>
                <a href=""><img src="../img/flower_img/flower_1.jpg" alt=""></a>
                <p class="price">￥289</p>
                <span class="title"><a href="">韩式花篮/阳光使者</a></span>
                <button ><img src="../img/gouwuchekong.png" alt=""> 加入购物车</button>
            </li>


        </ul>

    </div>
</body>
<script src="../js/api.js"></script>
<script src="../js/jquery.js"></script>
    <script>
 var login_username = localStorage.getItem('loginname');
        //渲染商品列表
     var keyword='';
    var orderName='goods_id';
    var orderType='asc';
    goods_list({
        keyword,
        orderName,
        orderType
    }).then(data=>{
        
        var {status,data}=data;
        
        var res=''
       data.forEach(val => {
           res+=`<li>
                <a href="detail.html?id=${val.id}"><img src="${val.img}" alt=""></a>
                <p class="price">￥${val.price}</p>
                <span class="title"><a href="" >${val.title}</a></span>
                <button id='${val.id}' class='addcart_btn' ><img src="../img/gouwuchekong.png" alt="">加入购物车</button>
            </li>
            `
       });
    //    console.log(res);
       $('.goods').html(res)
    })
     

    //加入购物车事件
    $('body').on('click','.addcart_btn',function(){
       
       if(login_username){
           var username=login_username;
           var goods_id=$(this).attr('id');
           var num=1;
           addCart({username,
           goods_id,
           num}).then(data=>{
               console.log(data);
               if(data.status){
                   alert(data.msg);
                   
               }
           })
       }   
       else{
           alert('请先登录');
           location.href='login.html';
       }              
    })

    //关键字搜索事件

    $('body').on('click','.search_btn',function(){
         keyword=$(this).prev().val();
         goods_list({
        keyword,
        orderName,
        orderType
    }).then(data=>{
        console.log(data);
        var {status,data}=data;
        console.log(data);
        var res=''
       data.forEach(val => {
           res+=`<li>
                <a href="detail.html?id=${val.id}"><img src="${val.img}" alt=""></a>
                <p class="price">￥${val.price}</p>
                <span class="title"><a href="" >${val.title}</a></span>
                <button id='${val.id}' class='addcart_btn' ><img src="../img/gouwuchekong.png" alt="">加入购物车</button>
            </li>
            `
       });
    //    console.log(res);
       $('.goods').html(res);
    })
    })

    $('body').on('change','#price_select',function(){
     
        if($(this).attr('value')==1){        
            keyword=$('.search_txt').val();
               orderName='price';
                 orderType='asc';
                 goods_list({keyword,orderName,orderType}).then(data=>{
                    var {status,data}=data;
        console.log(data);
        var res=''
       data.forEach(val => {
           res+=`<li>
                <a href="detail.html?id=${val.id}"><img src="${val.img}" alt=""></a>
                <p class="price">￥${val.price}</p>
                <span class="title"><a href="" >${val.title}</a></span>
                <button id='${val.id}' class='addcart_btn' ><img src="../img/gouwuchekong.png" alt="">加入购物车</button>
            </li>
            `
       })
       $('.goods').html(res);
                 })
        }

          if($(this).attr('value')==2){        
            keyword=$('.search_txt').val();
               orderName='price';
                 orderType='desc';
                 goods_list({keyword,orderName,orderType}).then(data=>{
                    var {status,data}=data;
        console.log(data);
        var res=''
       data.forEach(val => {
           res+=`<li>
                <a href="detail.html?id=${val.id}"><img src="${val.img}" alt=""></a>
                <p class="price">￥${val.price}</p>
                <span class="title"><a href="" >${val.title}</a></span>
                <button id='${val.id}' class='addcart_btn' ><img src="../img/gouwuchekong.png" alt="">加入购物车</button>
            </li>
            `
       })
       $('.goods').html(res);
                 })
        }
              
    })















      //是否登录判定来显示用户名  
      if(login_username){
                $('#login').html(`<p >欢迎：${login_username}</p>`)
        }  
         //注销按钮用来退出用户
    $('body').on('click','#logout',function(){
        if(login_username){
            localStorage.removeItem('loginname');
            $('#login').html(`<a href="./login.html">登录</a>`)
        }
    })
    </script>
</html>